import { Footer } from '@/components';
import { AlipayCircleOutlined, LockOutlined, TaobaoCircleOutlined, UserOutlined, WeiboCircleOutlined, } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Helmet, history } from '@umijs/max';
import { message, Tabs } from 'antd';
import { createStyles } from 'antd-style';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';
import { userRegisterUsingPost } from "@/services/gucheng/userController";
const useStyles = createStyles(({ token }) => {
    return {
        action: {
            marginLeft: '8px',
            color: 'rgba(0, 0, 0, 0.2)',
            fontSize: '24px',
            verticalAlign: 'middle',
            cursor: 'pointer',
            transition: 'color 0.3s',
            '&:hover': {
                color: token.colorPrimaryActive,
            },
        },
        lang: {
            width: 42,
            height: 42,
            lineHeight: '42px',
            position: 'fixed',
            right: 16,
            borderRadius: token.borderRadius,
            ':hover': {
                backgroundColor: token.colorBgTextHover,
            },
        },
        container: {
            display: 'flex',
            flexDirection: 'column',
            height: '100vh',
            overflow: 'auto',
            backgroundImage: "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
            backgroundSize: '100% 100%',
        },
    };
});
const ActionIcons = () => {
    const { styles } = useStyles();
    return (<>
      <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.action}/>
      <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.action}/>
      <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.action}/>
    </>);
};
const Register = () => {
    const [type, setType] = useState('account');
    const { styles } = useStyles();
    const handleSubmit = async (values) => {
        const { userPassword, checkPassword } = values;
        if (userPassword !== checkPassword) {
            message.error("两次密码不一致！");
            return;
        }
        try {
            // 注册
            const id = await userRegisterUsingPost({
                ...values,
            });
            if (id) {
                const defaultRegisterSuccessMessage = '注册成功！';
                message.success(defaultRegisterSuccessMessage);
                // 获取重定向参数
                const { search } = window.location;
                const urlParams = new URLSearchParams(search);
                const redirect = urlParams.get('redirect') || '/user/login';
                // 跳转到登录页面，并携带重定向参数
                history.push(redirect);
            }
        }
        catch (error) {
            const defaultRegisterFailureMessage = '注册失败，请重试！';
            message.error(defaultRegisterFailureMessage);
        }
    };
    return (<div className={styles.container}>
      <Helmet>
        <title>
          {'注册'}- {Settings.title}
        </title>
      </Helmet>
      <div style={{
            flex: '1',
            padding: '32px 0',
        }}>
        <LoginForm submitter={{
            searchConfig: {
                submitText: '注册',
            },
        }} contentStyle={{
            minWidth: 280,
            maxWidth: '75vw',
        }} logo={<img alt="logo" src="/logo.svg"/>} title="Image DADA" subTitle={'Ant Design 是西湖区最具影响力的 Web 设计规范'} initialValues={{
            autoLogin: true,
        }} actions={['其他注册方式 :', <ActionIcons key="icons"/>]} onFinish={async (values) => {
            await handleSubmit(values);
        }}>
          <Tabs activeKey={type} onChange={setType} centered items={[
            {
                key: 'account',
                label: '账户密码注册',
            },
        ]}/>

          {type === 'account' && (<>
              <ProFormText name="userAccount" fieldProps={{
                size: 'large',
                prefix: <UserOutlined />,
            }} placeholder={'请输入账号名'} rules={[
                {
                    required: true,
                    message: '用户名是必填项！',
                },
            ]}/>
              <ProFormText.Password name="userPassword" fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
            }} placeholder={'请输入密码'} rules={[
                {
                    required: true,
                    message: '密码是必填项！',
                },
                {
                    min: 8,
                    type: 'string',
                    message: '长度不能小于8'
                },
                {
                    max: 16,
                    type: 'string',
                    message: '长度不能大于16'
                }
            ]}/>
              <ProFormText.Password name="checkPassword" fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
            }} placeholder={'再次输入密码'} rules={[
                {
                    required: true,
                    message: '密码是必填项！',
                },
                {
                    min: 8,
                    type: 'string',
                    message: '长度不能小于8'
                },
                {
                    max: 16,
                    type: 'string',
                    message: '长度不能大于16'
                }
            ]}/>
            </>)}
        </LoginForm>
      </div>
      <Footer />
    </div>);
};
export default Register;
//# sourceMappingURL=index.jsx.map